<template>
  <view v-if="show" class="popup">
    <view class="mask"></view>
    <view
      class="content animated"
      :class="`${show ? typeAnimate[type].show : typeAnimate[type].close} ${[
        type,
      ]}`"
      style="animation-duration: 0.5s"
      @click.self="maskClick"
      @touchmove.stop.prevent="noAct"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'popup',
    props: {
      type: {
        // center / top / bottom
        type: String,
        default: 'center',
      },
      isMaskClick: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        show: false,
        typeAnimate: {
          center: {
            show: 'fadeIn',
            close: 'fadeOut',
          },
          top: {
            show: 'slideInDown',
            close: 'slideInUp',
          },
          bottom: {
            show: 'slideInUp',
            close: 'slideInDown',
          },
        },
      };
    },
    methods: {
      noAct() {},
      open() {
        this.show = true;
        this.$emit('change', { show: true });
      },
      close() {
        this.show = false;
        this.$emit('change', { show: false });
      },
      maskClick() {
        if (!this.isMaskClick) return;
        this.close();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99;
  }
  .mask {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms,
      transform 300ms ease 0ms;
    transform-origin: 50% 50%;
  }
  .content {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .center {
    justify-content: center;
  }
  .top {
    justify-content: flex-start;
  }
  .bottom {
    justify-content: flex-end;
  }
</style>
